@import "../../assets/scss/core/base";

$transfer-prefix-cls: #{$jigsaw-prefix}-transfer;
$list-prefix-cls: #{$jigsaw-prefix}-list;

.#{$transfer-prefix-cls} {
    display: inline-block;
    width: 400px;
    height: 200px;
    position: relative;
    &-loading {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #000;
        z-index: $zindex-level-2;
        opacity:0.6;
        span {
            position: absolute;
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-size: 20px;
            color: #fff;
            left: 50%;
            top: 50%;
            margin-left: -10px;
            margin-top: -10px;
        }
    }
    & > div{
        transition-duration: 300ms;
        border: 1px solid rgba(236,109,109,0);
    }
    &.#{$transfer-prefix-cls}-error > div {
        transition-duration: 300ms;
        border: 1px solid rgba(236,109,109,1);
    }
    &-wrapper {
        display: flex;
        flex: 1 1 0;
        width: 100%;
        height: 100%;
        background-color: $component-background;
    }
    &-disabled {
        cursor: not-allowed;
        border-color: $border-color-base !important;
        background-color: $disabled-bg;
        width: 100%;
        height: 100%;
        opacity: 0.6;
        position: absolute;
        z-index: $zindex-level-3;
    }
    &-box {
        border: 1px solid $border-color-base;
        border-radius: $border-radius-base;
        flex: 1 1 0;
        position: relative;
        background-color: $component-background;
        overflow: hidden;
    }
    &-option-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    &-option-bar {
        border: 1px solid $primary-color;
        background: $primary-color;
        color: $text-color-of-bg;
        border-radius: $border-radius-base;
        margin: 0 8px 4px;
        padding: 2px 12px;
        font-size: 12px;
        &:hover {
            background: $primary-7;
            color: $text-color-of-bg;
        }
        &:active {
            background: $primary-8;
            color: $text-color-of-bg;
        }
    }
    &-option-disabled {
        cursor: not-allowed;
        @include compatible(color, $disabled-color, $disabled-color-ie11);
        border: 1px solid $border-color-base;
        background: $disabled-bg;
        color: $text-color-secondary;
        &:hover, &:active {
            background: $disabled-bg;
            color: $text-color-secondary;
        }
    }
    &-head {
        position: relative;
        height: 32px;
        padding: 0 4px;
        border-bottom: 1px solid $border-color-base;
        &:before {
            content: '';
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        }
    }
    &-list-wrapper {
        max-height: 100%;
        &.#{$transfer-prefix-cls}-list-searchable {
            max-height: calc(100% - #{$height-base + 8px});
        }
        .#{$list-prefix-cls} {
            border: none;
        }
    }
    &-search-wrapper {
        padding: 4px;
    }
    &-middle-title {
        vertical-align: middle;
        margin-left: 4px;
    }
    &-right-title {
        position: absolute;
        top: 8px;
        right: 8px;
    }
    &-list-frame {
        display: block;
        height: 100%;
    }
    &-foot {
        height: 28px;
        text-align: center;
        &:before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
    }
}
